<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        .click {
            background-color: red;
        }
        
        .no {
            background-color: black;
        }
        
        ul {
            width: 100%;
            height: 60px;
        }
        
        ul>li {
            width: 12%;
            height: 60px;
            background-color: black;
            float: left;
            list-style: none;
            color: white;
            line-height: 60px;
            font-size: 20px;
            text-align: center;
        }
        
        ul>li>a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<div id="c_nav" class="c-nav">
    <span class="cloud"></span>
    <ul>
        <li class="click" onmouseover="cli(this);"><a href="#">首页新闻</a></li>
        <li onmouseover="cli(this);"><a href="#">师资力量</a></li>
        <li onmouseover="cli(this);"><a href="#">活动策划</a></li>
        <li onmouseover="cli(this);"><a href="#">企业文化</a></li>
        <li onmouseover="cli(this);"><a href="#">招聘信息</a></li>
        <li onmouseover="cli(this);"><a href="#">公司简介</a></li>
        <li onmouseover="cli(this);"><a href="#">我是佩奇</a></li>
        <li onmouseover="cli(this);"><a href="#">啥是佩奇</a></li>
    </ul>
</div>
<script>
    function change() {
        var length = $("ul li").length;
        var x = $("ul li").toArray();
        for (var i = 0; i < length; i++) {
            if ($(x[i]).hasClass("click")) {
                if (i + 1 < length) {
                    $(x[i]).removeClass("click");
                    $(x[i + 1]).addClass("click");
                    break;
                } else {
                    $(x[i]).removeClass("click");
                    $(x[0]).addClass("click");
                }
            }
        }
    }

    function cli(obj) {
        $.each($("ul li"), function() {
            $(this).removeClass("click");
        });
        $(obj).addClass("click");
        clearInterval(id);
        id = setInterval(change, 2000);
    }
    var id = setInterval(change, 2000);
</script>

<body>

</body>

</html>